<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="Collapse 折叠面板"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
    <demo-block title="基础用法">
      <hips-collapse v-model="active1">
        <hips-collapse-item
          title="折叠面板1"
          icon="el-icon-star-off"
        >
          面板内容...
        </hips-collapse-item>
        <hips-collapse-item title="折叠面板2">
          面板内容...
        </hips-collapse-item>
        <hips-collapse-item
          title="折叠面板3"
          disabled
        >
          面板内容...
        </hips-collapse-item>
      </hips-collapse>
    </demo-block>

    <demo-block title="手风琴">
      <hips-collapse
        v-model="active2"
        accordion
      >
        <hips-collapse-item title="折叠面板1">
          面板内容...
        </hips-collapse-item>
        <hips-collapse-item title="折叠面板2">
          面板内容...
        </hips-collapse-item>
        <hips-collapse-item title="折叠面板3">
          面板内容...
        </hips-collapse-item>
      </hips-collapse>
    </demo-block>

    <demo-block title="自定义标题内容">
      <hips-collapse v-model="active3">
        <hips-collapse-item>
          <div slot="title">
            折叠面板1<hips-icon name="question" />
          </div>
          面板内容...
        </hips-collapse-item>
        <hips-collapse-item
          title="折叠面板2"
          value="内容"
          icon="add-o"
        >
          面板内容...
        </hips-collapse-item>
      </hips-collapse>
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Collapse, CollapseItem, Icon } from '@hips/vue-ui';

export default {
  components: {
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [Icon.name]: Icon,
  },
  mixins: [ BasicView ],
  data() {
    return {
      active1: [ 0 ],
      active2: 0,
      active3: [],
    };
  },
};
</script>

<style scoped lang="stylus">
>>> .hips-collapse-item__content {
    font-size: 12px;
    line-height: 1.5;
    color: #4d4d4d;
    padding: 15px;
  }
</style>
